import QtQuick 2.0
import QtQuick.Controls 2.12

Rectangle {
    id: bottomRect

    // 滑槽
    Rectangle {
        id: progressSlider
        color: "#4d4d56"
        height: 8
        width: 500
        anchors.verticalCenter: parent.verticalCenter
        radius: height / 2
        property real value: 0.1
        property real maxValue: 1
        Label {
            id: currentTimeLabel
            text: "00:00"
            color: "white"
            font.pixelSize: 12
            font.family: "黑体"
            anchors.right: progressSlider.left
            anchors.rightMargin: 5
            anchors.verticalCenter: progressContentRect.verticalCenter
        }
        Label {
            id: maxTimeLabel
            text: "60:60"
            color: "white"
            font.pixelSize: 12
            font.family: "黑体"
            anchors.left: progressSlider.right
            anchors.leftMargin: 5
            anchors.verticalCenter: progressContentRect.verticalCenter
        }

        // 已播放部分
        Rectangle {
            id: progressContentRect
            anchors.left: parent.left
            anchors.top: parent.top
            radius: height / 2
            anchors.bottom: parent.bottom
            color: "#b94d51"
            width: progressSlider.width * (progressSlider.value / progressSlider.maxValue)
        }

        // 滑块
        Rectangle {
            id: currentPosRect
            height: parent.height + 6
            width: height
            radius: width / 2
            visible: false
            anchors.right: progressContentRect.right
            anchors.rightMargin: -width / 2     // 往左边缩自己的一半距离
            anchors.verticalCenter: progressContentRect.verticalCenter
        }

        MouseArea {
            anchors.fill: parent
            hoverEnabled: true
            onEntered: {
                currentPosRect.visible = true
            }
            onExited: {
                currentPosRect.visible = false
            }
            onPositionChanged: {    // 鼠标移动事件
                if (pressed) {
                    progressSlider.value = mouseX / progressSlider.width
                    if (progressSlider.value >= 1) {
                        progressSlider.value = 1
                    }
                }
            }
        }
    }
}
